<!DOCTYPE html>
<html>
<head>
<title>WebChat</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="EliteCRM, WebChat" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="WebChat" />
<link rel="stylesheet" type="text/css" href="js/viewer/viewer.min.css" />
<script type="text/javascript" src="js/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/viewer/viewer.min.js"></script>
<style>
.imageShow {
	position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.viewer-backdrop {
    background-color: rgba(0,0,0,1);
}
.viewer-close {
	display: none;
}
</style>
<script type="text/javascript">

function getParaFromUrl() {
    var url = window.location.href, 
    	pos = url.indexOf("?"), 
    	parastr = url.substring(pos + 1), 
    	para = {};
    var paraArr = parastr.split("&");
    for (var i = 0; i < paraArr.length; i++) {
    	var paraOne = paraArr[i];
    	para[paraOne.substring(0, paraOne.indexOf("="))] = paraOne.substring(paraOne.indexOf("=") + 1, paraOne.length);
    }
    return para;
}

$(function() {
	var params = getParaFromUrl();
	if (params.url) {
		var urls = params.url.split(',');
		showImages(urls, params.index);
	} else {
		$(window).on('message', function(e) {
			var event = e.originalEvent;
			var urls = event.data.urls;
			var index = event.data.index;
			if (urls) {
				showImages(urls, index);
			}
		});
		if (window.opener) {
			window.opener.postMessage({
				cmd: 'imgViewer'
			}, '*');
		}
	}
});

function showImages(urls, i) {
	$.each(urls, function(i, u) {
		var img = $('<img style="display:none">');
		img.attr('src', decodeURIComponent(u));
		img.appendTo('.imageShow');
	});
	var _imageViewer = new Viewer($('.imageShow')[0], {
		  inline: false,
		  button: true,
		  title: false,
		  toolbar: {
			  zoomIn: true,
			  zoomOut: true,
			  oneToOne: true,
			  reset: true,
			  prev: urls.length > 1,
			  play: {
			    show: true,
			    size: 'large',
			  },
			  next: urls.length > 1,
			  rotateLeft: true,
			  rotateRight: true,
			  flipHorizontal: true,
			  flipVertical: true,
		  },
		  tooltip: false,
		  movable: true,
		  loop: false,
		  navbar: false,
		  backdrop: 'static'
	});
	//_imageViewer.show();
	var index  = i || 0;
	if (index >= urls.length) {
		index = urls.length - 1;
	}
	_imageViewer.view(index);
}
</script>
</head>
<body>
<div class="imageShow">
</div>
</body>
</html>